<template>
  <page-state-view :view-ready="viewReady">
    <div class="full~ flex flex-col">
      <div class="flex-none p-10px box-border border-b border-gray-200 between~">
        <div class="text-lg">我的团队</div>
        <div class="flex">
          <div class="mr-10px">
            <add-group @success="getGroup"/>
          </div>
          <create-group @success="getGroup"/>
        </div>
      </div>
      <div class="flex-1 full~ p-10px bg-gray-100 box-border flex flex-wrap">
        <div v-if="groups === null || groups.length === 0" class="full~ center~">
          <no-content size="150"/>
        </div>
        <n-grid v-else cols="2 s:3 m:4 l:5 xl:6 2xl:7" :x-gap="12" :y-gap="8" responsive="screen">
          <n-grid-item style="height: fit-content" v-for="(item, index) of groups" :key="index">
            <group-card :id="item.groupId"
                        :cover="item.groupCover"
                        :name="item.groupName"
                        :desc="item.groupDesc"/>
          </n-grid-item>
        </n-grid>
      </div>
    </div>
  </page-state-view>
</template>

<script lang="ts">
import {defineComponent, ref} from "vue"
import PageStateView from "@/components/viewComponents/PageStateView.vue";
import NoContent from "@/components/viewComponents/NoContent.vue";
import GroupCard from "@/pages/group/components/GroupCard.vue";
import AddGroup from "@/pages/group/components/AddGroup.vue";
import CreateGroup from "@/pages/group/components/CreateGroup.vue";
import {NGrid, NGridItem, useMessage} from "naive-ui";
import {IGroupCard} from "../type"
import {useBaseStore} from "@/store/base";
import {useGetAddGroup} from "../hooks";

export default defineComponent({
  components: {PageStateView, NoContent, GroupCard, AddGroup, CreateGroup, NGrid, NGridItem},
  setup() {
    const message = useMessage()
    const viewReady = ref(true)
    const baseStore = useBaseStore()
    const groups = ref<IGroupCard[]>([])
    const userId = ref(baseStore.userId)

    onMounted(async () => {
      await getGroup()
    })

    async function getGroup() {
      const result = await useGetAddGroup()
      if (result.code !== 1000) {
        message.error("获取团队信息失败")
      } else {
        groups.value = result.data
        message.success("获取团队信息成功")
      }
    }

    return {
      userId,
      groups,
      viewReady,
      getGroup
    }
  }
})


</script>

<style scoped>

</style>